<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- v-show指令 -->
        <p v-show="flag">是否显示v-show</p>
        <button @click="flag=!flag">显示隐藏</button>

        <!-- v-if 指令 -->
        <!-- <p v-if="user.age>40">讨伐刘备</p>
        <p v-else-if="user.age>30">灭袁绍</p>
        <p v-else-if="user.age>20">刺杀董卓</p>
        <p v-else>讨伐黄巾军</p> -->
        <p v-if="flag">是否显示v-if</p>
    </div>

</body>

</html>
<script>
    // v-show
    // 语法: v-show='boolean' 决定绑定该指令的标签或组件是否显示或隐藏
    // 相当于display:none|| block 语法

    // v-if 
    // 语法: v-if='boolean' 决定绑定指令的元素是否渲染 

    // v-show 和v-if 的区别?
    // 如果涉及到频繁的切换显示和隐藏, 使用v-show  
    // 这样节省浏览的性能开销, 不需要重复创建和销毁dom

    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                flag: true,
                user: {
                    name: '曹操',
                    age: 40
                }
            }
        }
    }).mount('#app')


</script>